<template>
  <div class="root">
    <div>
      <span class="basic">基础信息</span>
    </div>
    <el-form
      :model="form"
      style="max-width: 1000px; margin-top: 20px"
      label-width="150px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="PI号:">
            <el-input
              v-model="form.pinumber"
              autocomplete="off"
              placeholder="请输入（销售的po号）"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="提单号:">
            <el-input
              v-model="form.bill"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="开船时间:">
            <el-date-picker
              v-model="form.sail"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              type="date"
              placeholder="请选择"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="到港时间:">
            <el-date-picker
              v-model="form.arrivalTime"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              type="date"
              placeholder="请选择"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="船公司:">
            <el-input
              v-model="form.shippingCompany"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="航次:">
            <el-input
              v-model="form.voyagen"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="目的港:">
            <el-input
              v-model="form.destination"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="代理联系方式:">
            <el-input
              v-model="form.agentmobile"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="公司名称:">
            <el-input
              v-model="form.company"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话:">
            <el-input
              v-model="form.mobile"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="邮箱:">
            <el-input
              v-model="form.email"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地址:">
            <el-input
              v-model="form.address"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="实际重量:">
            <el-input
              v-model="form.weight"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实际方数:">
            <el-input
              v-model="form.square"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="单价:">
            <el-input
              v-model="form.price"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="进仓费:">
            <el-input
              v-model="form.warehouusefee"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer">
      <el-button type="info" @click="save"> 提交 </el-button>
      <el-button>关闭</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { addDeviler } from "@/api/forworder/forworder.js";

const router = useRouter(); // 使用useRouter来获取router实例
const route = useRoute();
const orderid = route.query.orderid;
const form = ref({
  id: "",
  pinumber: "",
  bill: "",
  sail: "",
  arrivalTime: "",
  shippingCompany: "",
  voyagen: "",
  destination: "",
  agentmobile: "",
  company: "",
  mobile: "",
  email: "",
  address: "",
  weight: "",
  square: "",
  price: "",
  warehousefee: "",
  orderid: orderid
});
async function save() {
  let res = await addDeviler(form.value);
  if (res.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    router.push({
      path: "/forwarder/Transactionorder"
    });
  } else {
    ElMessage({
      message: "保存失败",
      type: "error"
    });
  }
}
</script>

<style scoped>
.root {
  width: 95vw;
  background-color: #fff;
  border-radius: 5px;
}
.basic {
  font-size: 24px;
  font-weight: bold;
  color: #0054a6;
  margin-left: 30px;
  margin-top: 20px;
  display: inline-block;
  border-style: none;
  border-left: #0054a6 solid 4px;
  padding-left: 10px;
}

:deep(.avatar-uploader .avatar) {
  width: 128px;
  height: 128px;
  display: block;
}

:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  text-align: center;
}
.dialog-footer {
  width: 150px;
  display: flex;
  justify-content: space-between;
  position: relative;
  left: 40%;
  transform: translateX(-40%);
}
</style>
